import React,{useEffect} from 'react'
import { Button, Modal } from 'antd';
import type { FormProps } from 'antd';
import { Checkbox, Form, Input,Select } from 'antd';
import {addTable,editTable} from '../store/module/table'
import { useAppDispatch } from '../utils/hooks';
import { useDispatch } from 'react-redux';
interface Props {
  isModalOpen:boolean;
  handleOk:()=>void;
  handleCancel:()=>void;
  title:string;
  editVal:any;
}

type FieldType = {
    key?:string;
  name?: string;
  icon?: string;
  address?: string;
  date?:string;
  flag?:string;
};
const Box = (props: Props) => {
  const [form] = Form.useForm();
    const dispatch=useAppDispatch();
    let  {isModalOpen,handleOk,handleCancel,title,editVal}=props;
    console.log(editVal)
 
      useEffect(()=>{
            if(editVal){
              form.setFieldsValue({
                name:editVal.name,
                address:editVal.address,
                flag:editVal.flag
               });
            }


      },[editVal])


    const onFinish: FormProps<FieldType>['onFinish'] = (values) => {
        //提交数据 需要先判断是新增还是修改
        if(title==="新增信息"){
               console.log('Success:', values);
            values.key= new Date().getTime().toString();
            values.icon="https://img1.baidu.com/it/u=3207868005,4221943088&fm=253&fmt=auto&app=138&f=JPEG?w=200&h=200"
            values.date=new Date().toLocaleString();
            console.log(values)
            //向仓库派发
            dispatch(addTable(values));
                 form.resetFields();
        }else{
            //修改
              
                values.key=editVal.key;
                  console.log('Success:', values); 

                  dispatch(editTable(values));
        }
         
                //关闭弹窗
                handleOk()
            //清空表单
           

};

const onFinishFailed: FormProps<FieldType>['onFinishFailed'] = (errorInfo) => {
  console.log('Failed:', errorInfo);
};
    return (
        <div>
             <Modal title={title} open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
             <Form
              form={form}
    name="basic"
    labelCol={{ span: 8 }}
    wrapperCol={{ span: 16 }}
    style={{ maxWidth: 600 }}
    initialValues={{ remember: true }}
    onFinish={onFinish}
    onFinishFailed={onFinishFailed}
    autoComplete="off"
  >
    <Form.Item<FieldType>
      label="用户名"
      name="name"
      rules={[{ required: true, message: 'Please input your username!' }]}
    >
      <Input />
    </Form.Item>

    <Form.Item<FieldType>
      label="地址"
      name="address"
      rules={[{ required: true, message: 'Please input your password!' }]}
    >
      <Input />
    </Form.Item>

     <Form.Item<FieldType>
      label="状态"
      name="flag"
      rules={[{ required: true, message: 'Please input your password!' }]}
    >
        <Select>
            <Select.Option value="通过">通过</Select.Option>
            <Select.Option value="拒绝">拒绝</Select.Option>
           
          </Select>
    </Form.Item>

 
     
    <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
      <Button type="primary" htmlType="submit">
     提交
      </Button>
    </Form.Item>
  </Form>
      </Modal>

      
        </div>
    )
}

export default Box
